<div class="row">
  <div class="col-sm-2">
    <button class="btn btn-primary" type="button" (click)="addVariable()">
      <i class="fas fa-plus-circle"></i> Add new Variable </button>
  </div>
  <div class="col-sm-10">
    <form [formGroup]="variableForm">
      <ng-container formArrayName="variables">

        <section class="droppable"
                 [dndDropzone]="['inputs']"
                 dndDragoverClass="droppable--drop"
                 (dndDrop)="onDrop($event)">

          <div style="border: 1px red solid; border-radius: 5px; padding: 15px;"
               dndPlaceholderRef>
            <b>Drop</b> <i> {{dragVariableName}} </i> <b>here</b>
          </div>

          <ng-container *ngFor="let variable of variableForm['controls'].variables['controls']; let s=index">

            <div class="space-bottom card" [dndDraggable]="{name: variable.get('name').value, oldIndex: s}"
                 dndEffectAllowed="move"
                 (dndStart)="onDndStart(variable.get('name').value)"
                 dndType="inputs">
              <div class="card-header">Variable: {{variable.get('name').value}}
                <span class="float-right">
                <button class="btn btn-link mr-1" type="button" data-toggle="collapse"
                        [attr.data-target]="['#collapseExample' + s]" aria-expanded="true">
                  <fa-icon [icon]="['far', 'edit']"></fa-icon>
                </button>
                <button class="btn btn-link mr-1" type="button" dndHandle>
                  <fa-icon [icon]="['fas', 'arrows-alt']"></fa-icon>
                </button>
                <button class="btn btn-link" type="button" (click)="delVariable(s)">
                  <fa-icon [icon]="['far', 'window-close']"></fa-icon>
                </button>
              </span>
              </div>
              <div class="card-body collapse show" id="collapseExample{{s}}">
                <ng-container formGroupName="{{s}}">
                  <div class="form-group">
                    <label for="variableName{{s}}">Name <span class="required">*</span></label>
                    <input id="variableName{{s}}" class="form-control"
                           [ngClass]="{ 'is-valid': variable.get('name').valid
                         && (variable.get('name').dirty || variable.get('name').touched),
                         'is-invalid': variable.get('name').invalid
                         && (variable.get('name').dirty || variable.get('name').touched)}"
                           formControlName="name"
                           required>
                    <div id="variableHelpers" class="form-text text-muted">
                      Variable Helpers:
                      <a href="#" *ngFor="let des of destinationStep.destinationForm.get('destination').value | filterUnique"
                         class="badge badge-pill badge-info mr-1" data-toggle="modal" data-target="#variableHelper"
                         (click)="getVariableHelp(des.className)">
                        {{des.className}} <fa-icon icon="question-circle"></fa-icon>
                      </a>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="variableDefault{{s}}">Default Value <span class="required">*</span></label>
                    <input id="variableDefault{{s}}" class="form-control"
                           [ngClass]="{ 'is-valid': variable.get('default').valid
                         && (variable.get('default').dirty || variable.get('default').touched),
                         'is-invalid': variable.get('default').invalid
                         && (variable.get('default').dirty || variable.get('default').touched)}"
                           formControlName="default"
                           required>
                  </div>

                  <ng-container formArrayName="templates">
                    <label>Templates</label>
                    <table class="table table-bordered">
                      <thead>
                      <tr>
                        <th>#</th>
                        <th>Type</th>
                        <th>Template</th>
                        <th>Action</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr *ngFor="let templ of variable['controls'].templates['controls']; let iy=index" formArrayName="{{iy}}">
                        <td>{{iy + 1}}</td>
                        <td>
                          <select formControlName="type" class="form-control"
                                  [ngClass]="{ 'is-valid': templ.get('type').valid
                                   && (templ.get('type').dirty
                                   || templ.get('type').touched), 'is-invalid': templ.get('type').invalid
                                   && (templ.get('type').dirty || templ.get('type').touched)}"
                                  required>
                            <option *ngFor="let order of typeList; let i = index" [value]="order.public_id">
                              {{order.label}} #{{order.public_id}}
                            </option>
                          </select>
                        </td>
                        <td>
                          <input type="text" class="form-control" formControlName="template"
                                 [ngClass]="{ 'is-valid': templ.get('template').valid
                                   && (templ.get('template').dirty
                                   || templ.get('template').touched), 'is-invalid': templ.get('template').invalid
                                   && (templ.get('template').dirty || templ.get('template').touched)}"
                                 required>
                        </td>
                        <td>
                          <button type="button" class="btn btn-outline-primary" (click)="delTemplate(iy,s)">
                            <fa-icon [icon]="['far', 'trash-alt']"></fa-icon>
                          </button>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </ng-container>
                  <button type="button" class="btn btn-outline-secondary" (click)="addTemplate(s)">+ Add Template</button>
                </ng-container>
              </div>
            </div>
          </ng-container>
        </section>

      </ng-container>
    </form>
  </div>
</div>

<div class="modal fade" id="variableHelper" tabindex="-1" role="dialog" aria-labelledby="variableHelper" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Variable Helper</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <table class="table">
          <thead>
          <tr>
            <th scope="col">Name</th>
            <th scope="col">Required</th>
            <th scope="col">Description</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let v of variableHelper">
            <td>{{v.name}}</td>
            <td>{{v.required}}</td>
            <td>{{v.description}}</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
